<template>
	<div>
		<van-tabs animated @click="checkedCategory" v-model="active">
			<van-tab v-for="item in brotherCategory"
					 :key="item.id"
					 :title="item.name"
					 :name="item.id">
				<div class="title_desc">
					<h3>{{item.name}}</h3>
					<p>{{item.front_desc}}</p>
				</div>
				<Products :goodsList="goodsList" />
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import Products from "@/components/homeComp/Products";
import { getCategoryData, getCategoryList } from "@/network/api";
export default {
	components: { Products },
	created() {
		// 获取分类导航数据
		getCategoryData(this.$route.query.id).then(res => {
			if (res.errno == 0) {
				// console.log(res);
				this.brotherCategory = res.data.brotherCategory
				// this.currentId = res.data.currentCategory.id
				this.currentCategory = res.data.currentCategory
        this.active = this.currentCategory.id
			}
		})
		this.getCategoryList(this.$route.query.id);
	},

	data() {
		return {
			// 标题栏种类数组
			brotherCategory: [],
			// 当前某个种类
			currentCategory: {},
			// 页数
			page: 1,
			// 每页个数
			size: 1000,
			// 分类商品列表
			goodsList: [],

      active: 0,
		}
	},
	methods: {
		// 分类页面商品列表请求
		getCategoryList(categoryId) {
			getCategoryList(categoryId, this.page, this.size).then(res => {
				if (res.errno == 0) {
					// console.log(res);
					// console.log(categoryId);
					this.goodsList = res.data.goodsList
				}
			})
		},

		// 点击分类标签发情请求切换列表数据
		checkedCategory(name) {
			this.$router.push('/channel?id=' + name)
			this.getCategoryList(name)
		}
	},
}
</script>
<style scoped lang='less'>
.title_desc {
	text-align: center;
	h3 {
		font-size: 0.18rem;
		height: 0.5rem;
		line-height: 0.5rem;
		font-weight: 400;
	}
	p {
		height: 0.3rem;
		line-height: 0.3rem;
		font-size: 0.14rem;
		color: #666;
	}
}
</style>